{% extends "./base.html" %}

{% block pagetitle %}
  {{ gettext("pageTitleFeatures") | safe }}
{% endblock %}

{% block top %}
<div class="page-heading">
  <div class="content-wrapper">
    <h1>{{ gettext("featuresHeader") | safe }}</h1>
  </div>
</div>
{% endblock %}

{% block content %}
<div class="page-content">
  <div class="content-wrapper">

    <div class="callout">
      <p>{{ gettext("featuresCallout") | safe }}</p>
      <p>{{ gettext("featuresCalloutDesc") | safe }}</p>
    </div>

    <div class="feature-list">

      <div class="feature">
        <div class="video-wrapper">
          <video src="/img/features/live-preview.mp4" loop autoplay></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>
        <h2 class="feature-name">{{ gettext("livePreviewFeatureTitle") | safe }}</h2>
        <p class="feature-description">
          {{ gettext("livePreviewFeatureDesc") | safe }}
        </p>
      </div>

      <div class="feature">
        <div class="video-wrapper paused">
          <video src="/img/features/remix.mp4" loop></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>
        <h2 class="feature-name">{{ gettext("remixFeatureTitle") }}</h2>
        <p class="feature-description">
          {{ gettext("remixFeatureDesc") | safe }}
        </p>
      </div>

      <div class="feature">
        <div class="video-wrapper paused">
          <video src="/img/features/snippets.mp4" loop></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>
        <h2 class="feature-name">{{ gettext("snippetsFeatureTitle") }}</h2>
        <p class="feature-description">
          {{ gettext("snippetsFeatureDesc") | safe }}
        </p>
      </div>

      <div class="feature">
        <div class="video-wrapper paused">
          <video src="/img/features/console.mp4" loop></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>

        <h2 class="feature-name">{{ gettext("consoleFeatureTitle") }}</h2>
        <p class="feature-description">
          {{ gettext("consoleFeatureDesc") }}
        </p>
      </div>

      <div class="feature wide">
        <div class="video-wrapper paused">
          <video src="/img/features/file-tree.mp4" loop></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>

        <h2 class="feature-name">{{ gettext("fileTreeFeatureTitle") }}</h2>
        <p class="feature-description">
          {{ gettext("fileTreeFeatureDesc") }}
        </p>
        <ul>
          <li>{{ gettext("fileTreeFeatureDescHighlight1") | safe }}</li>
          <li>{{ gettext("fileTreeFeatureDescHighlight2") | safe }}</li>
        </ul>
      </div>

      <div class="feature">
        <div class="video-wrapper paused">
        <video src="/img/features/theme.mp4" loop></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>


        <h2 class="feature-name">{{ gettext("themeFeatureTitle") }}</h2>
        <p class="feature-description">
          {{ gettext("themeFeatureDesc") }}
        </p>
      </div>

      <div class="feature">
        <div class="video-wrapper paused">
          <video src="/img/features/tutorial.mp4" loop></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>
        <h2 class="feature-name">{{ gettext("tutorialFeatureTitle") | safe }}</h2>
        <p class="feature-description">
          {{ gettext("tutorialFeatureDesc") }}
        </p>
      </div>

      <div class="feature">
        <div class="video-wrapper paused">
          <video src="/img/features/autocomplete.mp4" loop></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>
        <h2 class="feature-name">{{ gettext("autocompleteFeatureTitle") }}</h2>
        <p class="feature-description">
          {{ gettext("autocompleteFeatureDesc") | safe }}
        </p>
      </div>

      <div class="feature">
        <div class="video-wrapper paused">
          <video src="/img/features/inline-css.mp4" loop></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>
        <h2 class="feature-name">{{ gettext("inlineCSSFeatureTitle") }}</h2>
        <p class="feature-description">
          {{ gettext("inlineCSSFeatureDesc") | safe }}
        </p>
      </div>

      <div class="feature">
        <div class="video-wrapper paused">
          <video src="/img/features/publishing.mp4" loop></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>
        <h2 class="feature-name">{{ gettext("publishingFeatureTitle") }}</h2>
        <p class="feature-description">
          {{ gettext("publishingFeatureDesc") }}
        </p>
      </div>

      <div class="feature">
        <div class="video-wrapper paused">
          <video src="/img/features/colorpicker2.mp4" loop></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>
        <h2 class="feature-name">{{ gettext("colorpickerFeatureTitle") }}</h2>
        <p class="feature-description">
          {{ gettext("colorpickerFeatureDesc") | safe }}
        </p>
      </div>

      <div class="feature">
        <div class="video-wrapper paused">
          <video src="/img/features/preview-modes.mp4" loop></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>
        <h2 class="feature-name">{{ gettext("previewModesFeatureTitle") }}</h2>
        <p class="feature-description">
          {{ gettext("previewModesFeatureDesc") | safe }}
        </p>
      </div>

      <div class="feature">
        <div class="video-wrapper paused">
          <video src="/img/features/inspector.mp4" loop></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>

        <h2 class="feature-name">{{ gettext("inspectorFeatureTitle") }}</h2>
        <p class="feature-description">
          {{ gettext("inspectorFeatureDesc") | safe }}
        </p>
      </div>

      <div class="feature">
        <div class="video-wrapper paused">
          <video src="/img/features/image-filters.mp4" loop></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>
        <h2 class="feature-name">{{ gettext("imageFiltersFeatureTitle") }}</h2>
        <p class="feature-description">
          {{ gettext("imageFiltersFeatureDesc") }}
        </p>
      </div>

      <div class="feature">
        <div class="video-wrapper paused">
          <video src="/img/features/take-a-selfie.mp4" loop></video>
          <div class="video-overlay"></div>
          <div class="video-indicator"></div>
        </div>
        <h2 class="feature-name">{{ gettext("takeASelfieFeatureTitle") }}</h2>
        <p class="feature-description">
          {{ gettext("takeASelfieFeatureDesc") | safe }}
        </p>
      </div>

    </div>
  </div>
</div>
{% endblock %}
